<template>
  <div>
    <v-container class="ma-8 pa-4">
      <v-row class="mt-2 mb-8">
        <v-chip
            class="ma-2"
            color="deep-purple lighten-3"
            label
            text-color="white"
        >
          <v-icon left>
            mdi-label
          </v-icon>
          课程讨论区
        </v-chip>
        <v-btn class="ma-2" fab color="deep-purple lighten-3" @click="createPost">
          <v-icon large>
            mdi-plus
          </v-icon>
        </v-btn>
      </v-row>

      <template>
        <v-card>
          <v-tabs color="deep-purple accent-4" right v-model="currentTab">
            <v-tab>最新发表</v-tab>
            <v-tab>最新回复</v-tab>

            <v-tab-item v-for="c in [deliver,reply]" :key="c.name">
              <v-container fluid>
                <v-col class="ma-4">
                  <post-item
                      cols="16"
                      md="8"
                      v-for="post in c.list"
                      :key="post.postId"
                      :authorId="post.authorId"
                      :content="post.content"
                      :postName="post.postName"
                  >
                  </post-item>
                </v-col>
                <v-pagination
                    v-model="c.currentPage"
                    :length="c.totalPage"
                    circle
                ></v-pagination>
              </v-container>
            </v-tab-item>
          </v-tabs>
        </v-card>
      </template>

    </v-container>
  </div>
</template>

<script>
import PostItem from "@/components/PostItem.vue";
import {
  getPostsByType
} from "@/api/course";

export default {
  name: "CourseDiscussion",
  components: {
    PostItem
  },

  data() {
    return {
      currentPostId: 0,
      currentPostName: "",
      currentTab: 0, // 0 1
      deliver: {
        name: "最新发表",
        totalPage: 1,
        currentPage: 1,
        list: []
      },
      reply: {
        name: "最新回复",
        totalPage: 1,
        currentPage: 1,
        list: []
      },
    };
  },

  watch: {
    "deliver.currentPage": {
      handler: function(val) {
        this.handleGetPostsByType(val, "deliver");
      }
    },

    "reply.currentPage": {
      handler: function(val) {
        this.handleGetPostsByType(val, "reply");
      }
    },
  },

  methods: {
    createPost() {
      const { courseId } = this.$route.params;
      this.$router.push(`/student/course/${courseId}/discussion/postCreate`);
    },
    handleGetPostsByType(page, type) {
      const { courseId } = this.$route.params;
      const typeMap = { deliver: "最新发表", reply: "最新回复" };
      getPostsByType({ courseId, type: typeMap[type], page }).then(res => {
        this[type].totalPage = res.pages;
        this[type].list = res.list;
      });
    },
    fetchData() {
      ["deliver", "reply"].forEach(t => {
        this.handleGetPostsByType(1, t);
      });
    }
  },

  mounted() {
    this.fetchData();
  }
};
</script>

<style scoped>

</style>